<template>
    <div>
        <h3>美化滚动条</h3>
        <ul>
            <li v-for="index in 30" :key="index">{{ index }}</li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
ul {
    height: 200px;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 4px;
        border-radius: 4px;
        background-color: #ddd;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #039;
    }

    li {
        line-height: 32px;
        text-align: center;
        & + li {
            border-top: 1px solid #f00;
        }
    }
}
</style>
